<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>你的小家</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/house.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="slider-container sc">
        <div id="slider-dom" class="slider-box">
        </div>
        <script id="slider" type="text/html">
            {{each pic}}
            <span data-index="{{ $index }}">
            {{each $value.pic}}
            <img src="{{$value}}"> {{/each}}
            </span> {{/each}}
        </script>
        <span class="pagination"></span>
        <div class="slider-label-container">
            <ul id="slider-label-dom" class="slider-label">
            </ul>
            <script id="slider-label" type="text/html">
                {{each pic}}
                <li><a data-index="{{ $index }}" data-id="{{ $value.id }}" class="{{ $index === 0 ? 'active' : '' }}" href="javascript:;">{{ $value.name }}</a></li>
                {{/each}}
            </script>
        </div>
        <div class="slider-label-mask"></div>
        <a class="btn btn-share bs" href="javascript:;">分享赚钱</a>
        <div class="share-mask"></div>
    </div>
    <div class="header-title">
        <span class="card-body-title"></span>
        <div class="card-body-subtitle">
            <span class="month-fee font-yellow"></span>
            <i class="icon icon-yen"></i>
            <a class="pay" href="javascript:;">付款优惠</a>
        </div>
        <div class="line-title">
            <div class="base-line"></div>
            <div class="base-info">基本信息</div>
        </div>
        <div id="base-dom" class="card-body"></div>
        <script id="base" type="text/html">
            <ul class="card-body-content">
                <li>{{ region_name }}</li>
                <li>{{ population }}</li>
                <li>{{ size }}㎡</li>
                <li class="last">{{ nums }}间在租</li>
            </ul>
            <div class="card-body-label">
                {{each configuration}}
                <label class="{{ $index | color }}">{{ $value }}</label> {{/each}}
            </div>
            <div class="divider"></div>
        </script>
        <ul id="nav-bar-dom" class="nav-bar yellow"></ul>
        <script id="nav-bar" type="text/html">
            <li><a class="active" href="javascript:;">你的小家</a></li>
            <li><a href="build.html?id={{ id }}">房间信息</a></li>
            <li class="last"><a href="around.html?id={{ id }}">周边/交通</a></li>
        </script>
    </div>
    <div id="housekeeper-dom" class="person-info">
    </div>
    <script id="housekeeper" type="text/html">
        <img class="circle-image" src="{{ housekeeper_logo }}">
        <div class="user-info">
            <span class="username">{{ housekeeper_username }}</span>
            <a href="comment.html?id={{ id }}">查看评价</a>
            <div class="star-bar">
                {{ housekeeper_star | star }}
            </div>
            <span class="font-blue">{{ housekeeper_star }}分</span>
        </div>
    </script>
    <div class="introduction"></div>
    <div class="introduction-body">
        <div class="line-title">
            <div class="base-line"></div>
            <div class="base-info">小家故事</div>
        </div>
    </div>
    <div class="content-body">
        <img src="image/decoration-border.png" />
        <div class="body-text">
            <p>工资每年都在小幅上涨，但是仍然涨不过房价，</p>
            <p>即使政府一直在不遗余力的调控，买不起房子的结果只能是租房。</p>
            <p>孤身一人租一套房子难免浪费金钱和空间。</p>
            <p>于是，蜂巢小家由此而生。</p>
            <br />
            <p>这里住着一群怀揣梦想的年轻人，小家不大，但很温暖。</p>
            <p>你带上酒，我带上故事，就能开一桌饭。</p>
            <p>不再一个人窝在家里冷暖自知，在小家，有大家。</p>
            <p>一起追梦，一起聊天，一起开心，一起抱怨。</p>
            <p>没有什么是一顿饭解决不了的，实在不行，那就两顿。</p>
            <br />
            <p>家再小，也能有温暖；梦再小，也配去流浪。</p>
            <p>蜂巢小家所追求的，即是为所有年轻人提供高性价比的精致小家。</p>
            <p>小家正在用行动证明自己，感谢每一个Honey对我们的见证。</p>
            <br />
            <p class="font-red">你的小家，我的大事</p>
        </div>
    </div>
    <ul class="service-bar">
        <li class="service-bar-item">
            <a href="javascript:;">
                <i class="icon icon-wifi"></i>
                <span class="item-title">WIFI</span>
            </a>
        </li>
        <li class="service-bar-item">
            <a href="javascript:;">
                <i class="icon icon-lampblack"></i>
                <span class="item-title">油烟机</span>
            </a>
        </li>
        <li class="service-bar-item">
            <a href="javascript:;">
                <i class="icon icon-refrigerator"></i>
                <span class="item-title">冰箱</span>
            </a>
        </li>
        <li class="service-bar-item">
            <a href="javascript:;">
                <i class="icon icon-bed"></i>
                <span class="item-title">大床</span>
            </a>
        </li>
        <li class="service-bar-item">
            <a href="javascript:;">
                <i class="icon icon-wardrobe"></i>
                <span class="item-title">衣柜</span>
            </a>
        </li>
        <li class="service-bar-item">
            <a href="javascript:;">
                <i class="icon icon-desk"></i>
                <span class="item-title">书桌</span>
            </a>
        </li>
    </ul>
    <div class="footer-padding"></div>
    <div class="tool-bar">
        <a class="favorite" href="javascript:;">
            <i class="icon icon-star-red-blank"></i>
        </a>
        <span class="separator"></span>
        <a id="phone" href="">
            <i class="icon icon-phone"></i>
        </a>
        <span class="separator"></span>
        <a href="javascript:;" class="btn prepoint">预约看房</a>
        <a href="javascript:;" class="btn yellow checkin">立即入住</a>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {

            $('body').on('click', '.prepoint, .checkin', function() {
                bee.open('build.html', {
                    id: bee.getQueryString('id')
                });
            });

            var n = 1;
            $('body').on('click', 'a.favorite', function(e) {
                var dom = $(this).find('.icon');
                if (dom.hasClass('icon-star-red-blank')) {
                    bee.request({
                        url: '/Member/Index/collection',
                        data: {
                            type: 1,
                            housing_id: bee.getQueryString('id'),
                        },
                        success: function(result) {
                            dom.removeClass('icon-star-red-blank').addClass('icon-star-red');
                        }
                    });
                } else {
                    bee.request({
                        url: '/Member/Index/collection',
                        data: {
                            type: 2,
                            housing_id: bee.getQueryString('id'),
                        },
                        success: function(result) {
                            dom.removeClass('icon-star-red').addClass('icon-star-red-blank');
                        }
                    });
                }
            });

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.pay', function() {
                var housing_id = $('.list-item.yellow').attr('data-id');
                if (housing_id === undefined) {
                    alert('请选择房间');
                    return;
                }
                for (var i = 0; list[i]; i++) {
                    if (list[i].id = housing_id) {
                        bee.template('profit', list[i], true);
                        $('.dialog').dialog('show');
                        break;
                    }
                }
            });

            bee.request({
                url: '/Index/Index/housing_view',
                data: {
                    id: bee.getQueryString('id'),
                },
                success: function(result) {
                    bee.template('slider', result.info, true);
                    bee.template('slider-label', result.info, true);
                    bee.template('base', result.info, true);
                    bee.template('housekeeper', result.info, true);
                    bee.template('nav-bar', result.info, true);
                    $('.card-body-title').text(result.info.title);
                    $('.month-fee').text('￥' + result.info.money + ' / 月 ');
                    $('.introduction').text(result.info.housekeeper_intro);
                    $('#phone').attr('href', 'tel:' + result.info.mobile);
                    if (result.info.is_collertion) {
                        $('.favorite .icon').removeClass('icon-star-red-blank').addClass('icon-star-red');
                    }
                    swiper();

                    bee.wxConfig(function() {
                        bee.hideAllNonBaseMenuItem();
                        bee.showMenuItems();
                        bee.wxMenuShareTimeline(result.info.title, bee.link.weixin + '/house.html?id=' + result.info.id + '&user_id=' + bee.cache('user_id'), function() {

                        }, function() {

                        });
                        bee.wxMenuShareAppMessage(result.info.title, result.info.neighbourhoods_addr, bee.link.weixin + '/house.html?user_id=' + bee.cache('user_id') + '&id=' + result.info.id, function() {

                        }, function() {

                        });
                    }, function(res) {});
                    bee.share();

                    $('body').on('click', '.bs', function() {
                        $('.share-modal').show();
                    });

                    $('body').on('click', '.slider-label a[data-index]', function(e) {
                        var width = $('body').width();
                        var size = $('.slider-container .slider-box img').length;
                        n = $('.slider-box span[data-index="' + $(this).attr('data-index') + '"]:first img').index('.slider-box img') + 1;
                        $('.slider-label a[data-index]').removeClass('active');
                        $(this).addClass('active');
                        $('.slider-container .pagination').text(n + ' / ' + size);
                        $('.slider-container .slider-box').css({
                            'margin-left': -(n - 1) * width
                        });
                    });
                }
            });

            function swiper() {
                var width = $('body').width();
                var size = $('.slider-container .slider-box img').length;
                $('.slider-container .slider-box').width(width * size);
                $('.slider-container .slider-box img').width(width);
                $('.slider-container .pagination').text(n + ' / ' + size);

                var startPos = 0;
                $('body').on('touchstart', '.sc', function(e) {
                    startPos = e.touches[0].pageX;
                });

                $('body').on('touchend', '.sc', function(e) {
                    var endPos = e.changedTouches[0].pageX;
                    if (Math.abs(startPos - endPos) < 10) {
                        return;
                    }
                    var left = $('.slider-container .slider-box').offset().left;
                    if (startPos > endPos) {
                        if (n > size - 1) {
                            return;
                        }
                        var index = $('.slider-box img').eq(n).parent().attr('data-index');
                        $('.slider-label a[data-index]').removeClass('active');
                        $('.slider-label a[data-index="' + index + '"]').addClass('active');
                        $('.slider-container .pagination').text((++n) + ' / ' + size);
                        $('.slider-container .slider-box').animate({
                            'margin-left': left - width
                        }, 500);
                    } else {
                        if (n < 2) {
                            return;
                        }
                        var index = $('.slider-box img').eq(n - 2).parent().attr('data-index');
                        $('.slider-label a[data-index]').removeClass('active');
                        $('.slider-label a[data-index="' + index + '"]').addClass('active');
                        $('.slider-container .pagination').text((--n) + ' / ' + size);
                        $('.slider-container .slider-box').animate({
                            'margin-left': left + width
                        }, 500);
                    }
                });
            }
        });
    </script>
    <div class="dialog">
        <div class="dialog-title">房租年付更优惠</div>
        <div class="dialog-body">
            <table>
                <thead>
                    <tr class="even">
                        <th>方式</th>
                        <th>租金（元/月）</th>
                        <th>押金（元）</th>
                        <th>总计（元/年）</th>
                    </tr>
                </thead>
                <tbody id="profit-dom">

                </tbody>
                <script id="profit" type="text/html">
                    <tr>
                        <td>月付</td>
                        <td>&yen;{{ month_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(month_pay) }}</td>
                    </tr>
                    <tr class="even">
                        <td>季付</td>
                        <td>&yen;{{ season_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(season_pay) }}</td>
                    </tr>
                    <tr>
                        <td>年付</td>
                        <td>&yen;{{ year_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(year_pay) }}</td>
                    </tr>
                </script>
            </table>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue close">关闭</a>
        </div>
    </div>
</body>

</html>
